import { mockAppData } from "@/app/mockData"; // Corrected import name
import Header from "@/components/Header";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import AppDetailClient from "@/components/AppDetailClient"; // Import the new client component

// Function to generate static paths for all mock apps
export async function generateStaticParams() {
  return mockAppData.map((app) => ({ // Corrected variable name
    id: app.id.toString(),
  }));
}

interface AppDetailPageProps {
  params: { id: string };
}

const AppDetailPage = async ({ params }: AppDetailPageProps) => {
  const appId = parseInt(params.id, 10);
  // Fetch app data (in a real app, this might be an API call)
  // For now, we find it directly from mockAppData as it's available server-side
  const app = mockAppData.find((app) => app.id === appId); // Corrected variable name

  if (!app) {
    return (
      <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center">
        <Header />
        <main className="flex-grow container mx-auto px-4 py-8 flex flex-col items-center justify-center">
          <h1 className="text-4xl font-bold mb-4">404 - 应用未找到</h1>
          <p className="text-xl mb-8">抱歉，我们找不到您要查找的应用。</p>
          <Link href="/"
            className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <ArrowLeft className="mr-2 h-5 w-5" />
            返回首页
          </Link>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />
      <main className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <Link href="/"
            className="inline-flex items-center text-indigo-400 hover:text-indigo-300 transition-colors">
            <ArrowLeft className="mr-2 h-5 w-5" />
            返回应用大厅
          </Link>
        </div>
        {/* Pass the fetched app data to the client component */}
        <AppDetailClient app={app} />
      </main>
      {/* Footer can be added here if needed */}
    </div>
  );
};

export default AppDetailPage;

